<template lang="">
  <div class="home-container">
    <el-container>
      <el-header>
        <!-- header左侧内容 -->
        <div class="header_left">
           <img src="@/assets/logo.png" alt="">
           <h2>在线后台管理系统</h2>
        </div>
        <!-- header右侧内容 -->
        <div class="header-right">
          <el-dropdown @command="dropDown">
            <span class="el-dropdown-link">
              下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="info">个人信息</el-dropdown-item>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
       
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
              default-active="2"
              unique-opened
              class="el-menu-vertical-demo"
              background-color="#324057"
              text-color="#fff"
              active-text-color="#ffd04b">

                <router-link to="">
                  <el-submenu index="0" class="home">
                    <template slot="title">
                      <i style="margin-right:10px" class="iconfont icon-shouye"></i>
                      <span>首页</span>
                      
                    </template>
                  </el-submenu>
                </router-link>
               
         
              <el-submenu index="1">
                <template slot="title">
                  <i style="margin-right:10px" class="iconfont icon-zijin"></i>
                  <span>资金管理</span>
                </template>
                <router-link to="/home/fundlist">
                  <el-menu-item index="1-1">资金流水</el-menu-item>
                </router-link>
                
   
              </el-submenu>

              <el-submenu index="2">
                <template slot="title">
                  <i style="margin-right:10px;" class="iconfont icon-dakaixinxi"></i>
                  <span>信息管理</span>
                </template>
                <router-link to="">
                  <el-menu-item index="2-1">个人信息</el-menu-item>
                </router-link> 
              </el-submenu>
        </el-menu>

        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container> 
  </div>
</template>
<script>
export default {
  name: "Home",
  methods: {
    dropDown(val) {
      // console.log(val)
      if (val === "info") {
        //跳转到info个人信息页面页面
      } else {
        //1.删除token
        sessionStorage.clear();
        this.$message.info("成功退出登录");

        //2.页面跳转
        this.$router.push("/login");
      }
    },
  },
};
</script>
<style lang="less">
.el-header {
  background: #324057;
  display: flex;
  justify-content: space-between;
}

.header_left {
  display: flex;
  align-items: center;

  img {
    max-width: 45px;
    max-height: 45px;
    margin-right: 20px;
  }

  h2 {
    color: white;
  }
}

.header-right {
  display: flex;
  align-items: center;
}

//侧边栏的高度，修改父元素的高度
.home-container,
.el-container,
.el-aside {
  height: 100%;
}

.el-aside {
  background: #324057;
  // height: 100%;
  // height: 100vh;
}

.el-dropdown-link {
  color: white;
  cursor: pointer;
}

.el-menu {
  border-right: 1px solid #324057;
}

.home .el-icon-arrow-down:before {
  display: none;
}
</style>